import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

class ListView1Route extends StatelessWidget {
  const ListView1Route({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView 1'),
      ),
      body: Center(
        child: ListView.builder(
          itemCount: 100,
          itemExtent: 50,
          itemBuilder: (context, index) {
            return ListTile(title: Text("$index"));
          },
        ),
      ),
    );
  }
}

class ListView2Route extends StatelessWidget {
  const ListView2Route({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView 2'),
      ),
      body: Center(
        child: Builder(builder: (context) {
          var d1 = const Divider(color: Colors.red);
          var d2 = const Divider(color: Colors.yellow);
          return ListView.separated(
            itemCount: 100,
            separatorBuilder: (context, index) {
              return index % 2 == 0 ? d1 : d2;
            },
            itemBuilder: (context, index) {
              return ListTile(title: Text("$index"));
            },
          );
        }),
      ),
    );
  }
}

class InfiniteListView extends StatefulWidget {
  const InfiniteListView({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _InfiniteListViewState();
}

class _InfiniteListViewState extends State<InfiniteListView> {
  static const _loadingTag = "##loading##"; //表尾标记

  final _words = <String>[_loadingTag];

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  void _retrieveData() {
    Future.delayed(const Duration(seconds: 3)).then((value) {
      var list = <String>[];
      for (var i = 0; i < 10; i++) {
        list.add(WordPair.random().asString);
      }
      setState(() {
        _words.insertAll(_words.length - 1, list);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView 无限加载'),
      ),
      body: Center(
        child: Column(
          children: [
            const ListTile(title: Text("商品列表")),
            Expanded(
              child: ListView.separated(
                itemCount: _words.length,
                separatorBuilder: (context, index) => const Divider(height: .0),
                itemBuilder: (context, index) {
                  if (_words[index] == _loadingTag) {
                    //不足100条，继续获取数据
                    if (_words.length - 1 < 50) {
                      //获取数据
                      _retrieveData();
                      //加载时显示loading
                      return Container(
                        padding: const EdgeInsets.all(16.0),
                        alignment: Alignment.center,
                        child: const SizedBox(
                          width: 24.0,
                          height: 24.0,
                          child: CircularProgressIndicator(strokeWidth: 2.0),
                        ),
                      );
                    } else {
                      //已经加载了100条数据，不再获取数据。
                      return Container(
                        alignment: Alignment.center,
                        padding: const EdgeInsets.all(16.0),
                        child: const Text(
                          "没有更多了",
                          style: TextStyle(color: Colors.grey),
                        ),
                      );
                    }
                  }
                  //显示单词列表项
                  return ListTile(title: Text(_words[index]));
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
